<template>
	<view class="bg-light">
		<!-- 提示框 -->
		<toast ref="toast"></toast>
		
		<!-- #ifdef MP -->
		<view style="height: 44px;" class="fixed-top flex align-center bg-white">
			<view class="flex-1 px-3">
				<view class="bg-light flex align-center rounded-circle px-3 py-1">
					<text class="font text-light-muted">精彩热评：帝莎编程学院</text>
				</view>
			</view>
			<view class="mr-3">
				分类
			</view>
		</view>
		<view style="height: 44px;"></view>
		<!-- #endif -->
		
		<view class="py-2 px-3">
			<swiper-dot :list="info" :current="current">
				<swiper autoplay :interval="3000" :duration="300" circular
				style="height: 250rpx;" @change="swiperChange">
					<swiper-item v-for="(item, index) in info" :key="index">
						<image :src="item.cover" lazy-load
						style="height: 250rpx;" class="w-100 rounded-lg" 
						mode="aspectFill"/>
					</swiper-item>
				</swiper>
			</swiper-dot>
		</view>
		
		<card title="为你推荐">
			<view class="f-list">
				<media-list type="two" v-for="(item,index) in list2"
				:key="index" :item="item" :index="index"></media-list>
			</view>
		</card>
		
		<view class="f-divider"></view>
		
		<card title="为你推荐">
			<view class="f-list">
				<media-list type="three" v-for="(item,index) in list3"
				:key="index" :item="item" :index="index"></media-list>
			</view>
		</card>
		
		<view class="f-divider"></view>
		
		<card title="为你推荐">
			<media-list type="one" v-for="(item,index) in list1"
			:key="index" :item="item" :index="index"></media-list>
		</card>
		
		
	</view>
</template>

<script>
	import mediaList from '@/components/common/media-list.vue';
	import swiperDot from '@/components/common/swiper-dot.vue';
	import $data from '@/common/test/data.js';
	
	export default {
		components: {
			mediaList,
			swiperDot
		},
		data() {
			return {
				info: [],
				current: 0,
				list1:[],
				list2:[],
				list3:[],
			}
		},
		onLoad() {
			this.$H.get('/indexlist').then(res=>{
				
				this.list1=res
				this.list2=res
				this.list3=res
				this.info=res
			})
		},
		onNavigationBarButtonTap() {
			uni.switchTab({
				url:'../category/category'
			})
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'../search/search'
			})
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current
			}
		}
	}
</script>

<style>
	
</style>
